<template>
  <div class="compile">
    <div class="compile_header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content">
      <div class="photo">
        头像
        <img v-if="userInfo.avatar" :src="userInfo.avatar" alt class="icon">
        <img v-else src="../../assets/img/ps_1.png" alt class="icon">
        <input type="file" accept="image/*" @change="onFileChange">
        <i class="iconfont icon-you"></i>
      </div>
      <div class="gender">性别
        <div class="btnBox">
          <!--  -->
          <!-- :class="{'nv-active':userData.Gender=='0'}" -->
          <i
            class="iconfont icon-unie66a"
            :class="{'nan-active':Gender=='1'}"
            @click="clickGender('1')"
          ></i>
          <i
            class="iconfont icon-nv5"
            style="font-size:17px"
            :class="{'nv-active':Gender=='0'}"
            @click="clickGender('0')"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import { scaleimg } from "../../utils/common";
import { uplaodTouXiang, getUserInfo, changeUserGx } from "../../api";
import { getGuid } from "../../utils/index";
import { Toast } from "mint-ui";

export default {
  name: "compile",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "我",
        title: "编辑",
        isIcon: true
      },
      userInfo: {
        avatar: require("../../assets/img/ps_1.png")
      },
      formatdata: "",
      URL: "http://www.912cc.com/JYEIcon/",
      userData: {},
      Gender: 0
    };
  },
  components: {
    topBar
  },
  mounted() {
    this.getUserData();
  },
  methods: {
    clickGender(i) {
      changeUserGx({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        MC: i
      }).then(res => {
        if (res.data.Success) {
          this.Gender = i;
        }
        Toast({
          message: res.data.Content,
          duration: 3000
        });
      });
    },
    getUserData() {
      let id = localStorage.zyUserId;
      getUserInfo({
        ID: id,
        LoginMachine: getGuid()
      }).then(res => {
        if (res.data && res.data.Success) {
          this.userData = res.data.EntityList[0];
          this.Gender = this.userData.Gender;
          this.$set(
            this.userInfo,
            "avatar",
            "http://www.912cc.com" + this.userData.TxImg
          );
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    },
    //上传图片
    onFileChange(e) {
      let file = e.target.files[0];
      let filesize = file.size / 1024;
      let data = new FileReader();
      let img = new Image();
      data.onload = e1 => {
        img.onload = e => {
          if (/^image\/([a-zA-Z]|\*)+$/.test(file.type)) {
            this.getPhoto(scaleimg(e));
          }
        };
        img.src = e1.target.result; //触发加载img load事件
      };
      data.readAsDataURL(file);
    },
    getPhoto(formatdata) {
      uplaodTouXiang({
        ID: localStorage.zyUserId,
        LoginMachine: getGuid(),
        MC: formatdata
      }).then(res => {
        if (res.data.Success) {
          let img = res.data.EntityList[0].value2;
          this.$set(this.userInfo, "avatar", this.URL + img);
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.compile {
  .compile_header {
    padding-top: 0.54rem;
    height: 1.96rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    width: 7.1rem;
    height: 3rem;
    margin: 0 auto;
    position: relative;
    top: -25px;
    color: #616161;
    font-size: 20px;

    .photo {
      line-height: 1.57rem;
      background: #fff;
      border-radius: 10px;
      background: #fff;
      padding: 0 10px;
      position: relative;

      .icon {
        width: 1.05rem;
        height: 1.06rem;
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        right: 45px;
        top: 0.25rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      input {
        width: 1.05rem;
        height: 1.06rem;
        position: absolute;
        position: absolute;
        border-radius: 50%;
        right: 45px;
        top: 0.25rem;
        opacity: 0;
      }

      .iconfont {
        float: right;
        font-size: 22px;
        color: #616161;
        line-height: 1.77rem;
      }
    }

    .gender {
      line-height: 1.57rem;
      background: #FFF;
      border-radius: 0.2rem;
      margin-top: 10px;
      padding: 0 10px;
      position: relative;

      .btnBox {
        width: 1.77rem;
        // height: 0.51rem;
        line-height: 0.51rem;
        background: #BFBFBF;
        border-radius: 0.21rem;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        text-align: center;

        .iconfont {
          flex-grow: 1;
          font-size: 15px;
        }

        .nan-active {
          border-radius: 0.21rem;
          background: #33B0FF;
          color: #fff;
        }

        .nv-active {
          border-radius: 0.21rem;
          background: #f88;
          color: #fff;
        }
      }
    }
  }
}
</style>

